<template>
  <div class="content-wrapper">
    <div class="content-header">生产工艺</div>
    <div class="content-container">
      <el-form>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openDialog(false)"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <!-- :formatter="subProductDictCodeList" -->
      <el-table v-loading="listLoading" :data="dataList" highlight-current-row>
        <el-table-column
          label="产品项目"
          prop="productDictValue"
          min-width="200px"
        />
        <!-- :formatter="productDictCodeList" -->
        <el-table-column
          label="产品子项"
          prop="subProductDictValue"
          min-width="200px"
        />
        <el-table-column
          label="工艺文档"
          prop="documentName"
          min-width="200px"
        />
        <el-table-column
          label="版本"
          prop="version"
          width="100px"
          align="center"
        />
        <el-table-column
          label="状态"
          prop="status"
          width="100px"
        >
          <template slot-scope="{row}">
          <el-tag v-if="row.status == 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="openDialog(row)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="pushAppoint(row)"
                  v-if="row.status == 1"
                  >停用
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="pushAppoint(row)"
                  v-if="row.status == 0"
                  >启用
                </el-dropdown-item>
                <el-dropdown-item @click.native="pushDelete(row)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog @close="dialogClose" :title="titleMap[type]" :visible.sync="dialogVisible" width="30%">
      <el-form
        label-width="120px"
        class="demo-dynamic"
        :rules="rules"
        ref="ruleForm"
        :model="temp"
      >
        <el-form-item label="选择产品" prop="productValue">
          <div class="block">
            <el-cascader
              ref="cascader"
              v-model="productValue"
              :options="productList"
              @change="change"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="工艺文档">
          <el-cascader
            v-model="fileLevel"
            disabled
            @change="changeType"
            :options="documentCategory" :show-all-levels="false">
          </el-cascader>
        </el-form-item>
        <el-form-item v-if="documentType" label="选择文件" prop="documentId">
<!--          <el-radio-group @change="changeRadio" v-model="temp.documentId">-->
<!--            <el-radio v-for="(document, index) in documentList" :label="document.documentId" :key="index">{{ document.documentName }}</el-radio>-->
<!--          </el-radio-group>-->
          <el-select v-if="documentList && documentList.length > 0" v-model="temp.documentId" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in documentList"
              :key="index"
              :label="item.documentName"
              :value="item.documentId">
            </el-option>
          </el-select>
          <span v-else>暂无文件数据</span>
        </el-form-item>
        <el-form-item label="填写版本" prop="version">
          <el-input
            style="width: 50%"
            disabled
            v-model="temp.version"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="type == 'create'?createTechnique():updateTechnique()">确 定</el-button>
      </span>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getDataList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Product from '@/views/manufacture/components/Product/index.vue'
import SelectTheFile from '@/components/SelectTheFile/index.vue'
import SelectFolder from '@/views/flow/components/SelectFolder'
import { listDictTreeItem } from '@/api/base/dict.js'
import {
  save,
  getManufacturingTq,
  deleted,
  update
} from '@/api/rs/technique.js'
import { getDocumentListByType } from '@/api/xd/documentFlow'

export default {
  components: { Product, SelectTheFile, Pagination, SelectFolder },
  data() {
    return {
      dataList: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
      },
      total: 999,
      listLoading: false,
      list: [],
      ProductData: {},
      dialogVisible: false,
      productValue: '',
      fileLevel: ['3','TZ'],
      temp: {
        documentName: '',
        documentId: '',
        fileLevel: '3,TZ',
        version: '',
        productDictCode: '',
        subProductDictCode: '',
      },
      productList: [],
      type: '',
      status: '',
      techniqueId: '',
      rules: {
      },
      titleMap: {
        create: "新增",
        update: "修改"
      },
      documentCategory: [],
      level: null,
      documentType: null,
      documentList: null,
      selectFolderData: {
        title: '选择'
      }
    }
  },
  mounted() {
    this.getDataList()
    this.listDictTreeItem()
    this.getDocumentCategory()
    this.changeType(this.fileLevel)
  },
  watch: {
    ProductValue(val, res) {
      console.log(val, res, 'kk')
    }
  },
  methods: {
    /**
     * 对话框关闭时触发
     */
    dialogClose(){
      this.productValue = '',
      this.fileLevel = null
      this.temp =  {
        documentName: '',
          sourceDocumentId: '',
          documentId: '',
          fileLevel: null,
          version: '',
          productDictCode: '',
          subProductDictCode: '',
      }
    },
    /**
     * 当单选框修改时触发
     */
    changeRadio(val){
      let document = this.documentList.find(e => {
        if (e.documentId == val) {
          return true
        }
      })
      console.log(document, "document")
      this.temp.documentName = document.documentName
      this.temp.version = document.version
      // this.selectFolderData = {
      //   title: '选择文件位置',
      //   deleteDialog: true
      // }
    },
    //选择改变时触发
    changeType(val){
      this.temp.documentId = null
      this.temp.documentName = null
      this.documentType = val[val.length - 1]
      this.temp.fileLevel = this.fileLevel[0] + ',' + this.fileLevel[1]
      getDocumentListByType({ type: this.documentType}).then(res => {
        console.log(res.data)
        this.documentList = res.data
      })
    },
    getDocumentCategory(){
      listDictTreeItem({
        dictGroupCode: 'document_category',
        parentDictId: 0
      }).then(res => {
        this.documentCategory = res.data
      })
    },
    // 分页
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      getManufacturingTq(this.listQuery).then((res) => {
        this.dataList = res.data.rows
        this.total = res.data.total
      })
    },
    // 获取产品子项
    async listDictTreeItem() {
      let data = await listDictTreeItem({
        dictGroupCode: 'product',
        parentDictId: 0
      })
      this.productList = data.data
    },
    // 打开弹框
    openDialog(row) {
      if (row) {//存在数据则修改
        this.type = 'update'
        this.productValue = [row.productDictCode,row.subProductDictCode]
        this.fileLevel = row.fileLevel.split(',')
        this.changeType(this.fileLevel)
        this.dialogVisible = true
        this.temp = row
        this.temp.sourceDocumentId = row.sourceDocumentId
        console.log(row, 'row')
        console.log(this.temp, 'this.temp')
      }else{//没有数据则新增
        this.dialogVisible = true
        this.type = 'create'
      }
    },
    // 打开产品子项弹框
    unfoldProduct() {
      this.ProductData = {
        dialogVisible: true
      }
    },
    /**
     * 新增
     */
    createTechnique(){
      console.log(this.temp, 'this.temp')
      save(this.temp).then((res) => {
        if (res.code == 1) {
          this.$message.success("新增成功")
          this.dialogVisible = false
          this.getDataList()
        }
      })
    },
    /**
     * 修改
     */
    updateTechnique(){
      console.log(this.temp, 'tehis.temp')
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          update(this.temp).then((res) => {
            if (res.code == 1) {
              this.$message.success("更新成功")
              this.dialogVisible = false
              this.getDataList()
            }
          })
        }
      })
    },
    /**
     * 修改时出发
     * @param val
     */
    change(val) {
      let nodesObj = this.$refs['cascader'].getCheckedNodes()
      this.temp.productDictCode = nodesObj[0].path[0]
      this.temp.subProductDictCode = nodesObj[0].path[1]
    },
    /**
     * 修改生产工艺
     * @param row
     * @param key
     */
    // modifyCationTechnique(row, key) {
    //   console.log(row, 'yyyy', key)
    //   this.dialogVisible = true
    //   this.type = 1
    //   if (key == 1) {
    //     this.temp.productValue = row.subProductDictCode
    //     this.subProductDictCode = row.subProductDictCode
    //     this.temp.documentName = row.documentName
    //     this.temp.newlyinput = row.version
    //     this.status = row.status
    //     this.techniqueId = row.techniqueId
    //     this.productDictCode = row.productDictCode
    //     this.documentId = row.documentId
    //   }
    // },
    /**
     * 启用生产工艺
     * @param row
     */
    pushAppoint(row) {
      let status = ''
      if (row.status === 1) {
        status = 0
      } else if (row.status === 0) {
        status = 1
      }
      let pushList = {
        documentId: row.documentId,
        documentName: row.documentName,
        productDictCode: row.productDictCode,
        status: status,
        subProductDictCode: row.subProductDictCode,
        techniqueId: row.techniqueId,
        version: row.version
      }
      update(pushList).then((res) => {
        if (res.code == 1) {
          this.getDataList()
        }
      })
    },
    /**
     * 删除生产工艺
     * @param row
     */
    pushDelete(row) {
      deleted({techniqueId: row.techniqueId}).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: '删除成功'
          })
          this.getDataList()
        }
      })
    }
  }
}
</script>
